JavaScript Tutorial

JavaScript Tutorial Overview

Welcome to JavaScript Tutorials. The intent of these tutorials is to provide a good understanding of JavaScripts.

Introduction to JavaScript

JavaScript was invented by Brendan Eich at Netscape(with Navigator 2.0), and has appeared in all browsers since 1996. JavaScript is from Netscape. JavaScript initially it was called as Live Script JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages. JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. JavaScript is the most popular scripting language on the internet and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.

What you should Already know

Before you continue you should have a basic understanding of the following. HTML and CSS.

Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "JavaScript Training" and course is aligned with industry needs & developed by industry veterans. Tekslate will turn you into JavaScript Expert.

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license.

Are Java and JavaScript the same?

No! Java and JavaScript are two completely different languages in both concept and design.

What can JavaScript do?

JavaScript gives HTML designers 3 programming tool-HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small “snippets” of code into their HTML pages

JavaScript can react to events –

A javascript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

JavaScript can read and write HTML elements –

A javascript can read and change the content of an HTML element.

JavaScript can be used to validate data –

A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing

. JavaScript can be used to detect the visitor’s browser-

A JavaScript can be used to detect the visitor’s browser. and depending on the browser-load another page specifically designed for that browser

JavaScript can be used to create cookies –

• A JavaScript can be used to store and retrieve information on the visitor’s computer

Related Blogs of JavaScript For More Info: JavaScript Operators, JavaScript Objects & Properties, JavaScript Switch Case

Limitations with JavaScript

We can’t treat JavaScript as a full-fledged programming language. it lacks the following important features: Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reasons. JavaScript can be used for Networking applications because is no such support available. JavaScript doesn’t have any multithreading or multi-process capabilities.  

JavaScript Development Tools

One of JavaScript’s strengths is that expensive development tools are not usually required. You can start with a simple text editor such as Notepad. Since it is an interpreted language inside the context of a web browser, you don’t even need to buy a compiler. To make our life simpler, various vendors have come up with very nice JavaScript editing tools. A few of them are listed here:

Microsoft FrontPage:

Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an interactive website.

Macromedia Dreamweaver MX: 

Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with the database, and conforms to new standards such as XHTML and XML.

Macromedia HomeSite 5: 

This provided a well-liked HTML and JavaScript editor, which will manage their personal web site just fine.  

Where JavaScript is Today?

The ECMAScript is the standard for scripting languages. The JavaScript 2.0 adheres to ECMAScript Edition 4. Today, Netscape’s JavaScript and Microsoft’s Jscript conform to the ECMAScript standard.

JavaScript & Browsers

Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to “hide” the JavaScript. Just add an HTML comment tag

<!—before the first JavaScript statement, and  a -- > (end of comment) after the last JavaScript statement, like this :

<html>

<body>

<script type=”text/javascript”>

<!— document.getElementByID(“demo”).innerHTML=Date(); /-- >

</script>

</body>

</html>

The two forward slashes at the end of the comment line(//) are the JavaScript symbol. This prevents JavaScript from executing -- > tag.

Comments in JavaScript

JavaScript supports both C-style and C++ style comments, Thus: Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. Any text between the characters /* and */ is treated as a comment. This may span multiple lines JavaScript also recognizes the HTML comment opening sequence

<!--, javascript treats this as a single-line comment, just as it does the // comment. The HTML comment closing sequence -- > is not recognized by JavaScript so it should be written as //- - >

Example

<script language=”JavaScript” type=”type/javaScript”>

<!— // This is a comment. It is similar to comment in C++

/ * This is a multiline comment in JavaScript It is very similar to comments in C programming

*/

//-- > </script>

Enabling JavaScript in Browsers

All modern browsers come with built-in support for JavaScript. Many times you may need to enable or disable this support manually. 

JavaScript in Internet Explorer

Here are simple steps to turn on or turn off JavaScript in your Internet Explorer :

1. Follow Tools - > Internet options from menu
2. Select the Security tab from the dialog box
3. Click the Custom Level button
4. Scroll down till you find the Scripting option
5. Select Enable radio button under Active scripting
6. Finally, click OK and come out

To disable JavaScript support in your Internet Explorer, you need to select the Disable radio button under Active Scripting.  

JavaScript in Opera

Here age simple steps to turn on or turn off JavaScript in your Opera:

1. Follow Tools - > Preferences

from the menu

2. Select the Advanced options from the dialog box.
3. Select Content from the listed items
4. Select Enable JavaScript checkbox.
5. Finally, click ok and come out.

To disable JavaScript support in your opera, you should not select Enable JavaScript checkbox.  

JavaScript in Firefox

JavaScript allows you to work with three primitive data types @

• Numbers eg. 123,120.50 etc
• Strings of text eg. “This text string” etc
• Boolean e.g true or false.

JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value. In addition to these primitive data types, JavaScript supports a composite data type known as an object. We will see an object detail in a separate chapter.

Note: Java does not make a distinction between integer values and floating-point values. All numbers in JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

Warning for Non-JavaScript browsers if you have to do something important using JavaScript then you can display a warning message to the user using <noscript> tags you can add no script block immediately after the script block as follows:

<html>

<body>

<script language-“javascript” type=”text/javascript”>

!— document.write(“Hello World!”) //-- >

</script>

<noscript>

Sorry… JavaScript is needed to go ahead.

</noscript>

</body>

</html>

Now, if the user’s browser does not support JavaScript or JavaScript is not enabled then a message from </noscript> will be displayed on the screen.